<!--suppress ALL -->
<include file="./Template/header.html" />

<link rel="stylesheet" type="text/css" href="/Template/css/doctorList.css">
<script type="text/javascript">


	$(function() {

		//初始化页面配置
		initPage("医生列表");

		var app = new Vue({
			el: '#container',
			data: {
				info: [],
				list: []
			},
			methods: {
				doctorDetail: function(id) {
					window.location.href = "/wechat/doctor/detail/id/"+id;
				}
			}
		})

		function getDoctorList(categoryId, cityId, doctorName) {

			$.ajax({
				url:"/wechat/doctor/doctorList",
				type:"post",
				data:{
					categoryId: categoryId,
					cityId: cityId,
					doctorName: doctorName
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					app.list = data;
					if(!isNullOrEmpty(data)) {
						app.info = data[0];
					}
					setTimeout(function(){
						bindChangeDoctor();
					}, 200)
				},
			})
		}
		$("select[name=categoryId]").change(function() {
			var value = $(this).find("option:selected").text();
			$(this).prev().attr('placeholder',value);
		});

		$("select[name=cityId]").change(function() {
			var value = $(this).find("option:selected").text();
			$(this).prev().attr('placeholder',value);
		});

		$("select[name=categoryId]").change(function() {

			var categoryId = $(this).val();

			var cityId = $("select[name=cityId]").val();

			var doctorName = $("input[name=doctorName]").val();

			getDoctorList(categoryId, cityId, doctorName);

		});

		$("select[name=cityId]").change(function() {

			var cityId = $(this).val();

			var categoryId = $("select[name=categoryId]").val();

			var doctorName = $("input[name=doctorName]").val();

			getDoctorList(categoryId, cityId, doctorName);

		});

		$("button.search-btn").bind("click", function() {

			var cityId = $("select[name=cityId]").val();
			var categoryId = $("select[name=categoryId]").val();
			var doctorName = $("input[name=doctorName]").val();

			getDoctorList(categoryId, cityId, doctorName);

		});

		function bindChangeDoctor() {

			$("li.item img").bind("click", function() {

				if($(this).hasClass("selected")) {
					return false;
				}

				$("li.item img").each(function() {
					$(this).removeClass("selected");
				});

				$(this).addClass("selected");

				var index = $(this).attr("index");

				app.info = app.list[index-1];

			});

		}

		getDoctorList("{$categoryId}", 0, "");

		var value = $("select[name=categoryId]").find("option:selected").text();
		$("select[name=categoryId]").prev().attr('placeholder',value);

	})

</script>

<div class="container" id="container">
	<!--<div class="head-search">-->
		<!--<input class="search-line" name="doctorName" type="text" placeholder="|请搜索医生的名字、关键字等">-->
		<!--<button class="search-btn">搜索</button>-->
	<!--</div>-->
	<div class="info-select">
		<div class="city-select">
			<span>城市：</span>
			<img class="icon-arrow" src="/Template/images/icon-arrow.png" alt="">
			<input class="city" type="text" placeholder="请选择城市" readonly>
			<select name="cityId" id="city">
				<option value="0" selected="selected">请选择城市</option>
				{:getCitySelectOptionHtml(0, 0)}
			</select>
		</div>
		<div class="disease-select">
			<span>病症：</span>
			<img class="icon-arrow" src="/Template/images/icon-arrow.png" alt="">
			<input class="disease" type="text" placeholder="请选择病症" readonly>
			<select name="categoryId" id="disease">
				<option value="0" selected="selected">请选择病症</option>
				{:getCategorySelectOptionHtml($categoryId, 0)}
			</select>
		</div>
	</div>
	<div class="no-data" v-if="list == null")>暂无数据</div>
	<div class="content" v-if="list.length > 0">
		<div class="doctor-info" v-on:click="doctorDetail(info.doctor_id)">
			<img class="doctor-pic" src="{{info.image_url}}" alt="">
			<p class="doc-name">{{info.doctor_name}}</p>
			<p class="hospital">{{info.hospital_name}}</p>
			<p class="abstract">
				{{info.brief}}
			</p>
		</div>
		<p class="number">
			<span class="now-number">{{info.index}}</span>/<span class="sum">{{list.length}}</span>
		</p>
		<div class="doctor-list">
			<ul>
				<li class="item" v-for="item in list">
					<img index="{{item.index}}" class="doctor-img selected" v-if="item.index == 1" src="{{item.image_url}}" alt="">
					<img index="{{item.index}}" class="doctor-img" v-if="item.index != 1" src="{{item.image_url}}" alt="">
				</li>
			</ul>
		</div>
	</div>


</div>
<include file="./Template/footer.html" />